<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增盘点单据')"/>
    <style>
        .el-divider--horizontal {
            margin: 32px 0!important;
        }
        .marginL {
            margin-left: 5%;
        }
        .flexBox {
            display: flex;
        }
    </style>
</head>
<body>
<div class="container-div">
    <el-divider content-position="left">单据信息</el-divider>
    <div class="marginL">
        <el-form label-position="left" :model="billOutMaster.info" ref="formF" label-width="100px" :rules="billOutMaster.rules" class="demo-ruleForm flexBox">
            <div style="width: 308px">
                <el-form-item size="small" label="单据号:">
                    <el-input v-model="billOutMaster.info.billNo" :disabled="true"></el-input>
                </el-form-item>
            </div>
            <div style="width: 308px;margin-left: 60px">
                <el-form-item size="small" label="货区:" prop="areaId">
                    <el-select v-model="billOutMaster.info.areaId" placeholder="请选择货区">
                        <el-option v-for="(item, index) in areas" :key="index" :label="item.areaName" :value="item.areaId"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <el-divider content-position="left">物料信息</el-divider>
    <div class="marginL">
        <el-form label-position="left" :model="billOutMaster.info" label-width="100px" class="demo-ruleForm flexBox">
            <div style="width: 308px">
                <el-form-item size="small" label="物料编码:">
                    <el-input v-model="billOutMaster.info.materialProduct" placeholder="请输入物料编码"></el-input>
                </el-form-item>
            </div>
            <div style="width: 308px;margin-left: 60px">
                <el-form-item size="small" label="单晶规格:">
                    <el-select v-model="billOutMaster.info.specId" placeholder="请选择单晶规格">
                        <el-option label="G12" value="G12"></el-option>
                        <el-option label="M6" value="M6"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div style="width: 308px;margin-left: 60px">
                <el-form-item size="small" label="拼棒类型:">
                    <el-select v-model="billOutMaster.info.assemblyType" placeholder="请选择拼棒类型">
                        <el-option label="整棒" value="1"></el-option>
                        <el-option label="二拼" value="2"></el-option>
                        <el-option label="三拼" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <div style="text-align: center">
        <el-button type="primary" @click="save()">确定</el-button>
        <el-button type="info" @click="closeModal()">返回</el-button>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/wms/js/date.js}"></script>
<script type="text/javascript" charset="UTF-8">
    var prefix = ctx + "boxitemcheck"

    var app = new Vue({
        el: '.container-div',
        data: {
            areas: [],
            billOutMaster: {
                info: {},
                rules: {
                    areaId: [
                        {required: true, message: '请选择货区', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            //关闭此页面
            closeModal: function(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },
            //获取可盘点货区列表
            getAreas: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    url: '/boxitemcheck/areaname',
                    type: 'POST',
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.areas = data.rows;
                    }
                })
            },
            //确定按钮
            save(){
                var that = this;
                this.$refs['formF'].validate((valid) => {
                    if(valid){
                        var data = JSON.stringify({
                            billOutMaster: that.billOutMaster.info
                        })
                        console.log(data)
                        $.ajax({
                            cache: true,
                            url: '/',
                            type: "POST",
                            data: data,
                            dataType: "json",
                            contentType: "application/json;charset-UTF-8",
                            async: false,
                            error: function(request){
                                $.modal.alertError("系统错误");
                            },
                            success: function(data){
                                if(data.code == web_status.SUCCESS){
                                    $.modal.msgReload(data.msg, "success")
                                }else if(data.code == web_status.WARNING){
                                    $.modal.alertWarning(data.msg)
                                }else{
                                    $.modal.alertError(data.msg);
                                }
                            }
                        })
                    }
                });
            }
        },
        created(){
            this.getAreas();

            var dt = new Date();
            var date = dt.pattern("yyyyMMdd-HHmmssS");
            this.billOutMaster.info.billNo = date;
        }
    })
</script>
</body>
</html>
